<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Post 上传</title>
    <style>
        h1, h2 {
            font-weight: normal;
        }

        #msg {
            margin-top: 10px;
        }
    </style>
</head>
<body>

<h1>Ajax Post 上传</h1>

<input id="file-selector" type="file">
<script src="https://payos-1251056009.cos.ap-shanghai.myqcloud.com/static/jquery.min.js"></script>
<script src="/static/cos-js-sdk-v5.min.js"></script>
<script>
    var Bucket = 'payos-1251056009';
    var Region = 'ap-shanghai';
    var cos = new COS({
        getAuthorization: function (options, callback) {
            // 异步获取签名
            $.get('{:url()}', {
                bucket: options.Bucket,
                region: options.Region,
            }, function (data) {
                console.log(data);

                callback({
                    TmpSecretId: data.credentials.tmpSecretId,
                    TmpSecretKey: data.credentials.tmpSecretKey,
                    XCosSecurityToken: data.XCosSecurityToken,
                    ExpiredTime: data.expiredTime,
                });
            });
        }
    });

    // 监听选文件
    document.getElementById('file-selector').onchange = function () {

        var file = this.files[0];
        if (!file) return;

        // 分片上传文件
        cos.sliceUploadFile({
            Bucket: Bucket,
            Region: Region,
            Key: "/uploads/machtobank/"+file.name,
            Body: file,
        }, function (err, data) {
            console.log(err, data);
        });

    };
</script>
</body>
</html>